<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="data,global data,data catalog" />
  <title>Keyword Highlight Plugin for World Bank</title>

  <link type="text/css" rel="stylesheet" media="all" href="demo.css"/>
  <style>
  	body {width: 1200px; background: #f6f6f6;}
	iframe.demoframe {
		position: relative;
		border: solid 2px #989A94;
		margin: 20px 30px;
		padding: 20px;
		width: 750px;
		height: 950px;
		background: white;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
  </style>

  <script type="text/javascript">
   /* <![CDATA[ */
	 /* ]]> */
 </script>

  </head>
  <body> 
	  <h1>Country Keyword Highlight Plugin for World Bank</h1>

	  <div style="float:left; width: 300px;">
		  <h2>1. What's this plugin for?</h2>
		  <p>
This plugin can highlight the country-name as keywords in web pages, and show useful information about the country using data from world bank open API.<br/><br/>

	It is a pure front-end <b>javascript</b> plugin, and can be added to any website to enrich content without much changes to the back-end system of website.<br/> <br/>

	This plugin is currently compatible with <b>firefox</b>, <b>chrome</b> and <b>opera</b>. Please checkout the newest version from <a href="http://code.google.com/p/easy-show-data-plugin/">Highlight Plugin Project</a>
		</p>
		<h2>2. How to use this plugin?</h2>
		<p> First See the page  <a href="page_without_plugin.html" target="demoframe">Without the plugin</a> </p>
		<p> Then you are suggested to browse following demos:  </p>
		  <h2>Demo 1</h2>
		  <p><a href="demo_1.html" target="demoframe">Demo 1</a> is a basic example of using plugin, which uses the default configure of plugin. All the keywords in page are highlighted and detail information are shown in pop-up box when mouse moved on to the keywords.</p>
		  <h2>Demo 2</h2>
		  <p><a href="demo_2.html" target="demoframe">Demo 2</a> is another example of using plugin. Keywords in specified part of the page are highlighted in green color, and only the first apperance of one certain keyword will be highlighted.</p>
		  <h2>Demo 3</h2>
		  <p><a href="demo_3.html" target="demoframe">Demo 3</a> is a more advanced example, in which keywords are specified by user. Detail information are shown in pop-up box when mouse click the keyword</p> 
		  <br/><br/>
		  <p style="font-size: 12px; color: gray;">Author: <br/>
		  Chengye Zhao &lt;chengyezhao@gmail.com&gt;<br/>
		  Dongyan Cheng&lt;27chengdongyan@gmail.com&gt;</p>
	</div>

	<div style="float:left">
		<iframe name="demoframe" class="demoframe" src="page_without_plugin.html"></iframe>
	</div>

	<div style="clear:both"></div>
  </body>
</html>
